package com.eliza.music.ui.pager

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import com.eliza.music.ui.theme.PaddingSize

@Composable
fun DotIndicators(state: PagerState, modifier: Modifier) {
    Row(
        modifier = Modifier
            .fillMaxWidth(0.2f)
            .then(modifier),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        repeat(state.pageCount) { iteration ->
            val color = if (state.currentPage == iteration) Color.DarkGray else Color.White
            Box(
                modifier = Modifier
                    .size(PaddingSize.Normal.size)
                    .clip(CircleShape)
                    .background(color)
            )
        }
    }
}
